<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="box">
			<!-- 传递数据的时候，如果没有 v-bind 进行绑定，一律为字符型 -->
			<!-- 特别是 number 和 boolean 两个类型传值经常会出现错误 -->
			<hello-world
				:my-age="age"
				num="num"
				:bol="true"
				:parentarr="arr"
				:parentobj="obj"
			></hello-world>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 声明子组件
			Vue.component('hello-world', {
				props: ['myAge', 'num', 'bol', 'parentarr', 'parentobj'],
				data: function () {
					return {
						name: 'Tom'
					}
				},
				template: `
          <div>
				    <p>{{ name }}</p>
				    <p>{{ myAge }}</p>
				    <p>{{ typeof num }}</p>
				    <p>{{ typeof bol }}</p>
				    <p>
              <span v-for="(item, index) in parentarr" :key="index">{{ item }}</span>
            </p>
				    <p>
              <span v-for="(item, index) in parentobj" :key="index">{{ item }}</span>
            </p>
				    <p>{{ parentobj.name }} -- {{ parentobj.age }}</p>
				  </div>
        `
			})

			var vm = new Vue({
				el: '.box',
				data: {
					age: 3,
					num: 10,
					arr: [1, 2, 3],
					obj: {
						name: '斯派特',
						age: 18
					}
				}
			})
		</script>
	</body>
</html>
